/* Tree content. */
.tree-item-inner {
  @apply -flex -flex-row -items-center -min-h-[24px] -pl-[--list-nested-indent];
}

/* Toggle icon. */
.tree-toggle {
  @apply -w-4 -flex -items-center -justify-center -rounded -h-4 -flex-none --mr-1.5;
  --caret-size: 5px;
  --caret-opacity: .3;
}

/* Hover effection. */
.tree-item-inner > .item-icon {
  @apply -w-4 -opacity-50;
}
.tree-item-inner:hover > .item-icon {
  @apply -opacity-80;
}
.tree-item-inner.has-hover {
  @apply -rounded;
}

/* Link title. */
.tree-item-inner .item-title:not(:hover),
.tree-item-inner > a.item-title:not(:hover) {
  @apply -text-inherit;
}

/* Toolbar. */
.tree-item-inner > .toolbar {
  @apply -ml-4 -opacity-60;
}
.tree-item-inner:hover > .toolbar {
  @apply -opacity-100;
}

.tree-item > .active {
  background: var(--menu-active-bg);
  color: var(--menu-active-color);
}
.tree-item > .selected {
  background: var(--menu-selected-bg);
}
.tree-item > .selected .item-content {
  @apply -text-[--menu-selected-color] -font-bold;
}
